<style lang="less">
.bench_search {
  margin-bottom: 10px;
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div style="width: 100%;" >
      <Row>
        <Row class="search-info-style">
          <Col span="6">
            <span style="width: 30%">牌子名称：</span>
            <Input v-model="searchInfo.brand_name" style="width: 70%"></Input>
          </Col>
          <Col span="6">
            <span>类&ensp;&ensp;&ensp;别&ensp;：</span>
            <Select v-model="searchInfo.category" clearable style="width: 70%;">
              <Option value="1" >工作服务类</Option>
              <Option value="2" >评比表彰类</Option>
              <Option value="3" >创建示范类</Option>
              <Option value="4" >标识类</Option>
              <Option value="0" >其他</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>级&ensp;&ensp;&ensp;别&ensp;：</span>
            <Select v-model="searchInfo.level" clearable style="width: 70%;">
              <Option value="1" >市级</Option>
              <Option value="2" >区县</Option>
              <Option value="3" >街道</Option>
            </Select>
          </Col>
          <!-- <Col span="5">
            <span>位置：</span>
            <Select v-model="searchInfo.room" style="width: 70%;">
              <Option value="0" >室内</Option>
              <Option value="1" >室外</Option>
            </Select>
          </Col> -->
          <Col style="float:right" pull="1">
          <Button class="new-btn-sty" @click="init()"><Icon type="ios-search" />搜索</Button>
          <Button class="new-btn-sty" @click="brandModalShow({},true,'1','添加挂牌')"><Icon type="md-add" /> 添加</Button>
          </Col>
          <!-- <Col span="2" style="float:right" pull="1">
          <Button class="new-btn-sty" @click="brandModalShow({},true,'1','添加挂牌')"><Icon type="md-add" /> 添加</Button>
          </Col> -->
        </Row>
        <Row class="search-info-style">
          <Col span="6">
            <span>发牌单位：</span>
            <Select v-model="searchInfo.licensing" clearable style="width: 70%;">
              <Option v-for="item in dataList" :value="item.key" v-bind:key="item.key">{{ item.value }}</Option>
            </Select>
          </Col>
          <Col span="6">
            <span>位&ensp;&ensp;&ensp;置&ensp;：</span>
            <Select v-model="searchInfo.room" clearable style="width: 70%;">
              <Option value="0" >室内</Option>
              <Option value="1" >室外</Option>
            </Select>
          </Col>
          <!-- <Col span="2" style="float:right" pull="1">
            <Button class="new-btn-sty" @click="brandModalShow({},true,'1','添加挂牌')"><Icon type="md-add" /> 添加</Button>
          </Col> -->
        </Row>
      </Row>
      <!-- <vxe-toolbar>
        <template v-slot:buttons>
          <span style=""> -->
            <!-- <vxe-button @click="searchReset">重置</vxe-button> -->
            <!-- <vxe-button @click="init">搜索</vxe-button>
            <vxe-button @click="brandModalShow({},true,'1','添加挂牌')">添加</vxe-button> -->
            <!-- <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button> -->
          <!-- </span>
        </template> -->
      </vxe-toolbar>
      <vxe-table
        resizable
        border
        ref="xTree"
        row-id="row.id"
        show-overflow="tooltip"
        highlight-hover-row
        align="center"
        header-align="center"
        :data.sync="tableData">
<!--   :tree-config="{children: 'children', expandAll: true, line: true}"     -->
        <vxe-table-column field="brand_name" title="牌子名称" tree-node width="20%"></vxe-table-column>
        <vxe-table-column field="regionall" title="区域"></vxe-table-column>
        <vxe-table-column field="categoryall" title="类别"></vxe-table-column>
        <vxe-table-column field="levelall" title="级别"></vxe-table-column>
        <vxe-table-column min-width="220px" title="发牌单位">
          <template v-slot="{row}">
            <Tag v-for="(value,index) in row.licensingList" :key="index" :name="value">{{value}}</Tag>
          </template>
        </vxe-table-column>
        <vxe-table-column field="roomall" title="位置"></vxe-table-column>
        <vxe-table-column field="create_time" title="创建时间"></vxe-table-column>
        <vxe-table-column field="num" title="已发数量"></vxe-table-column>
        <!-- <vxe-table-column field="invalid_time" title="失效时间"></vxe-table-column> -->
        <!-- <vxe-table-column field="stateall" title="状态"></vxe-table-column> -->
        <vxe-table-column min-width="130px" title="操作">
          <template v-slot="{ row }">
<!--            <Button size="small" class="actionBtn" type="primary" v-if="row.children !=undefined"  @click="brandModalShow(row,true,'4','添加挂牌明细')">添加明细</Button>-->
<!--            <Button size="small" class="actionBtn" type="info" v-if="row.children !=undefined" @click="brandModalShow(row,true,'2','挂牌信息修改')">修改</Button>-->
            <Button size="small" class="actionBtn" type="info"  @click="brandModalShow(row,true,'2','挂牌信息修改')">修改</Button>
            <Button size="small" class="actionBtn" type="error"  @click="delBrand(row,'1')">删除</Button>
            <Button type="primary" size="small" class="actionBtn" @click="dealToCommunity(row)">发牌</Button>
<!--            <Button size="small" class="actionBtn" type="error" v-if="row.children !=undefined" @click="delBrand(row,'1')">删除</Button>-->
<!--            <Button size="small" class="actionBtn" type="info" v-if="row.children ===undefined" @click="brandModalShow(row,true,'3','挂牌明细信息修改')">修改</Button>-->
<!--            <Button size="small" class="actionBtn" type="error" v-if="row.children ===undefined" @click="delBrand(row,'2')">删除</Button>-->
          </template>
        </vxe-table-column>
      </vxe-table>
      <Page :total="searchInfo.totalnum" style="float: right;margin-top: 10px;"  class="page_style" :current="searchInfo.currentPageNo"
            :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-elevator show-sizer @on-page-size-change="changePagesize"/>
    </div>
    <Modal
      v-model="brandModal.show"
      :title="brandModal.title"
      @on-ok="addBrandOk()">
      <Form>
        <Row class="bench_search" v-if="brandModal.type === '4'">
          <Col span="7" class="ivu-form-item-label">上级名称：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="brandModal.info.name" disabled></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">挂牌名称：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="brandModal.info.brand_name"></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">类别：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Select v-model="brandModal.info.category" :disabled="brandModal.type === '3' || brandModal.type === '4'">
              <Option value="1" >工作服务类</Option>
              <Option value="2" >评比表彰类</Option>
              <Option value="3" >创建示范类</Option>
              <Option value="4" >标识类</Option>
              <Option value="0" >其他</Option>
            </Select>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">级别：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Select v-model="brandModal.info.level" :disabled="brandModal.type === '3' || brandModal.type === '4'">
              <Option value="1" >市级</Option>
              <Option value="2" >区县</Option>
              <Option value="3" >街道</Option>
            </Select>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">区域：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Select v-model="brandModal.info.region" :disabled="brandModal.type === '3' || brandModal.type === '4'">
              <Option value="1" >城市</Option>
              <Option value="2" >农村</Option>
            </Select>
          </Col>
        </Row>
        <!-- <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">状态：</Col>
          <Col span="12" class="ivu-form-item-content">
            <RadioGroup v-model="brandModal.info.state" type="button">
              <Radio label="0">有效</Radio>
              <Radio label="1">无效</Radio>
            </RadioGroup>
          </Col>
        </Row> -->
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">发牌单位：</Col>
          <Col span="15" class="ivu-form-item-content">
            <CheckboxGroup v-model="brandModal.info.licensing">
              <Checkbox label="1" border style="margin-top: 4px">市委组织部</Checkbox>
              <Checkbox label="2" border style="margin-top: 4px">市民政局</Checkbox>
              <Checkbox label="3" border style="margin-top: 4px">市农业农村局</Checkbox>
              <Checkbox label="4" border style="margin-top: 4px">市公安局</Checkbox>
              <Checkbox label="5" border style="margin-top: 4px">市委宣传部</Checkbox>
              <Checkbox label="6" border style="margin-top: 4px">市委政法委</Checkbox>
              <Checkbox label="7" border style="margin-top: 4px">市司法局</Checkbox>
              <Checkbox label="8" border style="margin-top: 4px">市文化旅游广电局</Checkbox>
              <Checkbox label="9" border style="margin-top: 4px">市退役军人局</Checkbox>
              <Checkbox label="10" border style="margin-top: 4px">沈阳警备区</Checkbox>
            </CheckboxGroup>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">位置：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Select v-model="brandModal.info.room" :disabled="brandModal.type === '3' || brandModal.type === '4'">
              <Option value="0" >室内</Option>
              <Option value="1" >室外</Option>
            </Select>
          </Col>
        </Row>
        <!-- <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">失效时间：</Col>
          <Col span="12" class="ivu-form-item-content">
            <DatePicker type="date" v-model="brandModal.info.invalid_time" :disabled="brandModal.type === '3' || brandModal.type === '4'" style="width: 100%" placeholder="失效时间"></DatePicker>
          </Col>
        </Row> -->
      </Form>
      <div slot="footer">
        <Button type="text" @click="brandModal.show = false">取消</Button>
        <Button type="primary" v-if="brandModal.type === '1'" @click="addBrandOk">确定</Button>
        <Button type="primary" v-if="brandModal.type === '2'" @click="updateBrandOk">确定</Button>
        <Button type="primary" v-if="brandModal.type === '3'" @click="setBrandDetailed">确定</Button>
        <Button type="primary" v-if="brandModal.type === '4'" @click="addBrandDetailed">确定</Button>
      </div>
    </Modal>
    <Modal
      v-model="deleteModal.show"
      title="删除">
      是否确认删除？
      <div slot="footer">
        <Button type="text" @click="deleteModal = false">取消</Button>
        <Button type="primary"  @click="delBrandOk(deleteModal.type)">确定</Button>
      </div>
    </Modal>
    <Modal
        v-model="modal"
        @on-ok="saveInfo"
        title="发牌">
        <div>
          <span>农村/社区：</span>
            <Select v-model="searchInfo.type" clearable style="width:50%">
              <Option value="">全部</Option>
              <Option value="1">社区</Option>
              <Option value="2">农村</Option>
            </Select>
            <Button type="primary" size="small" class="actionBtn" @click="findOfficeList()">搜索</Button>
          <template>
            <Tree v-if="!loading" :data="data2" show-checkbox ref="tree" @on-check-change="pickTreeNode"></Tree>
              <Row>
                <Col span="8" offset="11">
                  <Spin v-if="loading" size="large"></Spin>
                </Col>
              </Row>
          </template>
        </div>
      </Modal>
  </div>
</template>

<script>
import { getDictTreeList, findBrandList, addBrand, setBrand, delBrand, addBrandDetailed, setBrandDetailed, delBrandDetailed, setBrandState, date2str, findOfficeList, dealToCommunity } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      dataList: [],
      tableData: [],
      tableTypeData: [],
      row: {},
      pickRow: {},
      modal: false,
      formData: {},
      pickInfo: {},
      loading: true,
      data2: [],
      brandModal: {
        title: '添加挂牌',
        show: false,
        type: '',
        info: {}
      },
      updateBrandModal: {
        title: '修改挂牌信息',
        show: false,
        info: {}
      },
      formItem: {},
      list: [],
      typeList: [],
      deleteModal: {
        show: false,
        type: '',
        info: {}
      },
      deleteTypeModal: false,
      noDeleteTypeModal: false,
      searchInfo: {}
    }
  },
  methods: {
    init () {
      let param = {
        'level': this.searchInfo.level,
        'brand_name': this.searchInfo.brand_name,
        'room': this.searchInfo.room,
        'category': this.searchInfo.category,
        'pageNo': this.searchInfo.currentPageNo,
        'pageSize': this.searchInfo.currentPageSize,
        'licensing': this.searchInfo.licensing
      }
      findBrandList(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.searchInfo.totalnum = ret.data.data.totalRecord
          this.tableData = ret.data.data.results
          this.tableData.forEach(function (temp) {
            if (temp.children !== undefined) {
              temp.subsidiary_name = temp.children.length
            }
            if (temp.licensingall !== undefined) {
              temp.licensingList = temp.licensingall.split(',')
              console.log(temp.licensingList)
            }
            if (temp.licensing !== undefined) {
              temp.licensing = temp.licensing.split(',')
              console.log(temp.licensing)
            }
          })
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    brandModalShow (info, show, type, title) {
      console.log(info, 'row')
      if (type === '3') {
        info.brand_name = info.subsidiary_name
      }
      if (type === '4') {
        info.name = info.brand_name
        info.brand_name = ''
      }
      this.brandModal.info = info
      this.brandModal.show = show
      this.brandModal.type = type
      this.brandModal.title = title
    },
    addBrandOk () {
      let param = this.brandModal.info
      param.invalid_time = date2str(this.brandModal.info.invalid_time)
      let str = ''
      for (let i = 0; i < param.licensing.length; i++) {
        str += param.licensing[i] + ','
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
      }
      param.licensing = str
      addBrand(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('添加成功')
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: ret.data.errmsg
          })
        }
        this.init()
        this.brandModal.show = false
      })
    },
    updateBrandOk () {
      let param = this.brandModal.info
      console.log(this.brandModal.info.licensing, 'llllllllllllll')
      console.log(param, 'ppppppppppp')
      param.invalid_time = date2str(this.brandModal.info.invalid_time)
      let str = ''
      for (let i = 0; i < param.licensing.length; i++) {
        str += param.licensing[i] + ','
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
      }
      param.licensing = str
      setBrand(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('修改成功')
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: ret.data.errmsg
          })
        }
        this.init()
        this.brandModal.show = false
      })
    },
    delBrand (row, type) {
      this.row = row
      this.deleteModal.type = type
      this.deleteModal.show = true
    },
    delBrandOk (type) {
      if (type === '1') {
        delBrand({ 'id': this.row.id }).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Message.success('删除成功')
          } else {
            this.$Notice.error({
              title: '删除失败',
              desc: ret.data.errmsg
            })
          }
          this.init()
        })
      }
      if (type === '2') {
        delBrandDetailed({ 'id': this.row.id }).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Message.success('删除成功')
          } else {
            this.$Notice.error({
              title: '删除失败',
              desc: ret.data.errmsg
            })
          }
          this.init()
        })
      }
      if (type === '3') {
        setBrandState({ 'id': this.row.id }).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Message.success('删除成功')
          } else {
            this.$Notice.error({
              title: '删除失败',
              desc: ret.data.errmsg
            })
          }
          this.init()
        })
      }
      this.deleteModal.show = false
    },
    addBrandDetailed () {
      let param = {
        'brand_id': this.brandModal.info.id,
        'subsidiary_name': this.brandModal.info.brand_name
      }
      addBrandDetailed(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('添加成功')
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: ret.data.errmsg
          })
        }
        this.init()
        this.brandModal.show = false
      })
    },
    setBrandDetailed () {
      let param = {
        'id': this.brandModal.info.id,
        'subsidiary_name': this.brandModal.info.brand_name
      }
      setBrandDetailed(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('修改成功')
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: ret.data.errmsg
          })
        }
        this.init()
        this.brandModal.show = false
      })
    },
    searchReset () {
      this.searchInfo = {}
      this.init()
    },
    changePagesize (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.init()
    },
    pickTreeNode (e1, e2) {
      console.log(e1)
      console.log(e2)
      this.pickInfo = {}
      this.pickInfo = e1
    },
    dealToCommunity (e) {
      this.searchInfo.type = ''
      this.pickRow = {}
      this.pickRow = e
      this.loading = true
      this.modal = true
      this.formData = {}
      this.findOfficeList()
    },
    findOfficeList () {
      let data = {
        brand_id: this.pickRow.id,
        usertype: this.searchInfo.type
      }
      findOfficeList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data2 = []
          console.log(this.data2, '11111=====')
          this.data2 = ret.data.data
          console.log(this.data2, '22222=====')
          console.log(ret.data.data, '11111=====')
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    saveInfo () {
      let data = {
        brand_id: this.pickRow.id,
        grade: this.formData.grade,
        info: this.pickInfo
      }
      dealToCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '保存成功',
            desc: ret.data.errmsg
          })
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    getDictTreeList () {
      getDictTreeList().then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getDictTreeList()
  }
}
</script>

<style scoped>
.actionBtn {
  margin-right: 5px;
  margin-bottom: 5px;
}
.new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .search-info-style {
    margin: 10px;
  }
</style>
